<%-- Created by IntelliJ IDEA. User: Administrator Date: 2023/1/28 Time: 11:14
To change this template use File | Settings | File Templates. --%> <%@ page
contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>流失措施信息</title>
    <jsp:include page="../common/css_js.jsp" />
    <jsp:include page="../common/table.jsp"/>
  </head>
  <body>
    <div class="container col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <h4><b>添加流失措施</b></h4>
          </div>
        </header>
        <div class="card-body">
          <div class="row">
            <!-- 操作 -->
            <div class="col-md-12 column">
              <form class="form-inline" action="#" method="post">
                <table style="height: 180px">
                  <input type="hidden" name="id" />
                  <input type="hidden" name="lossId" value="${loss.id}" />
                  <tr>
                    <td>流失措施：</td>
                    <td>
                      <label>
                        <textarea
                          name="measure"
                          id="measure_1"
                          class="form-control"
                          cols="40"
                          rows="2"
                          placeholder="请输入流失措施"
                        ></textarea>
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>是否有效：</td>
                    <td>
                      <div
                        class="custom-control custom-radio custom-control-inline"
                      >
                        <input
                          type="radio"
                          id="customRadioInline8"
                          name="isValid"
                          value="1"
                          class="custom-control-input"
                          checked="checked"
                        />
                        <label
                          class="custom-control-label"
                          for="customRadioInline8"
                          >有效</label
                        >
                      </div>
                      <div
                        class="custom-control custom-radio custom-control-inline"
                      >
                        <input
                          type="radio"
                          id="customRadioInline9"
                          name="isValid"
                          value="0"
                          class="custom-control-input"
                        />
                        <label
                          class="custom-control-label"
                          for="customRadioInline9"
                          >无效</label
                        >
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>
                      <button type="reset" class="btn btn-info">
                        <span class="mdi mdi-refresh"></span>重置
                      </button>
                      <button
                        type="button"
                        class="btn btn-primary"
                        onclick="insert()"
                      >
                        <span class="mdi mdi-checkbox-marked-outline"></span
                        >保存
                      </button>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- 流失客户基本信息 -->
      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <h4><b>流失客户基本信息</b></h4>
          </div>
        </header>
        <div class="card-body">
          <table id="tab">
            <tr>
              <td>客户编号：</td>
              <td>
                <label
                  ><input
                    class="form-control"
                    name="customer_no"
                    value="${loss.customerNo}"
                    readonly="readonly"
                /></label>
              </td>
              <td>客户名称：</td>
              <td>
                <label
                  ><input
                    class="form-control"
                    name="customer_name"
                    value="${loss.customerName}"
                    readonly="readonly"
                /></label>
              </td>
            </tr>
            <tr>
              <td>客户经理：</td>
              <td>
                <label
                  ><input
                    class="form-control"
                    name="customer_manager"
                    value="${loss.customerManager}"
                    readonly="readonly"
                /></label>
              </td>
              <td>最后下单时间：</td>
              <td>
                <label
                  ><input
                    class="form-control"
                    name="last_order_date"
                    value="${loss.lastOrderDate}"
                    readonly="readonly"
                /></label>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <style>
        #tab {
          font-size: 18px;
          margin: 0 auto;
          width: 1100px;
          height: 120px;
        }

        #tab tr td:first-child {
          width: 150px;
          text-align: right;
          font-weight: bolder;
        }

        #tab tr td:nth-child(3) {
          text-align: right;
          font-weight: bolder;
        }

        #tab input {
          width: 280px;
          background-color: white;
        }
      </style>

      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <h4><b>暂缓措施信息</b></h4>
          </div>
        </header>
        <div class="card-body">
          <!-- 条件查询表单 -->
          <form
            class="form-inline"
            name="form1"
            action="#"
            method="post"
            id="toolbar"
          >
            <a class="btn btn-primary" id="tool" onclick="query()"
              ><span class="mdi mdi-table-large"></span>显示所有</a
            >
            &nbsp;&nbsp;
            <b>措施：</b>
            <label>
              <input
                name="measure"
                placeholder="请输入要查询的措施"
                class="form-control"
              /> </label
            >&nbsp; &nbsp;
            <button type="button" class="btn btn-primary" onclick="like()">
              <span class="mdi mdi-table-search"></span>搜索
            </button>
          </form>
          <!-- 数据显示 -->
          <div class="table-responsive">
            <table id="table"></table>
          </div>
          <br />
          <div class="col-md-4 column">
            <!-- 操作 -->
            <a class="btn btn-primary" href="${ctx}/page/customer-loss"
              ><span class="mdi mdi-keyboard-backspace"></span>返回</a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade bd-example-modal-lg"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">新增暂缓措施信息</h4>
            <div class="col-md-2 column"></div>
            <div class="col-md-4 column" id="close"></div>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <a aria-hidden="true">&times;</a>
            </button>
          </div>
          <div class="modal-body" style="background-color: #f8faf7">
            <!-- 增加修改表单 -->
            <div class="table-responsive">
              <form name="zgform">
                <table class="table table-bordered table-hover" id="tab333">
                  <input type="hidden" name="id" />
                  <input type="hidden" name="lossId" value="${loss.id}" />
                  <tr>
                    <td>措施：</td>
                    <td>
                      <label>
                        <textarea
                          name="measure"
                          class="form-control"
                          id="measure_2"
                          cols="40"
                          placeholder="请输入流失措施"
                        ></textarea>
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>是否有效：</td>
                    <td>
                      <div
                        class="custom-control custom-radio custom-control-inline"
                      >
                        <input
                          type="radio"
                          id="customRadioInline6"
                          name="isValid"
                          value="1"
                          class="custom-control-input"
                          checked="checked"
                        />
                        <label
                          class="custom-control-label"
                          for="customRadioInline6"
                          >有效</label
                        >
                      </div>
                      <div
                        class="custom-control custom-radio custom-control-inline"
                      >
                        <input
                          type="radio"
                          id="customRadioInline7"
                          name="isValid"
                          value="0"
                          class="custom-control-input"
                        />
                        <label
                          class="custom-control-label"
                          for="customRadioInline7"
                          >无效</label
                        >
                      </div>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              id="btn111"
              class="btn btn-primary"
              onclick="insert_update()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认流失 -->
    <div
      class="modal fade"
      id="loss"
      tabindex="-1"
      role="dialog"
      aria-labelledby="lossLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content" id="loss_div">
          <div class="modal-header">
            <h4 class="modal-title" id="lossLabel">确认流失</h4>
            <div class="col-md-2 column"></div>
            <div class="col-md-4 column"></div>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <a aria-hidden="true">&times;</a>
            </button>
          </div>
          <div class="modal-body">
            <div class="table-responsive">
              <form class="form-inline">
                <table
                  class="table table-bordered table-hover table-striped text-nowrap"
                  id="loss_tab"
                >
                  <tr>
                    <td>流失原因：</td>
                    <td>
                      <label>
                        <textarea
                          name="lossReason"
                          placeholder="请填写流失原因"
                          rows="5"
                          cols="40"
                          class="form-control"
                        ></textarea>
                      </label>
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              id="loss_btn"
              class="btn btn-primary"
              onclick="lossBtn()"
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
    <style>
      #loss_tab tr td:first-child {
        text-align: center;
        font-size: 16px;
      }
    </style>
    <script type="text/javascript">
      $(function () {
        if ("${loss.state}" === "1") {
          $("#tool").before(
            "" +
              "<a class='btn btn-primary' onclick='toAdd()'><span class='mdi mdi-plus'></span>添加暂缓</a>&nbsp;" +
              "<a class='btn btn-danger' onclick='batchDelete(\"customer-retrieval\")'><span class='mdi mdi-delete'></span>批量删除</a>&nbsp;" +
              "<a class='btn btn-danger' onclick='lossOk()' ><span class='mdi mdi-account-check'></span>确认流失</a>&nbsp;"
          );
          $(".card:eq(0)").hide();
        } else if ("${loss.state}" === "2") {
          $("#tool").before(
            "" +
              "<a class='btn btn-danger' onclick='batchDelete(\"customer-retrieval\")'><span class='mdi mdi-delete'></span>批量删除</a>&nbsp;" +
              "<a class='btn btn-danger' onclick='lossOk()' ><span class='mdi mdi-account-check'></span>确认流失</a>&nbsp;"
          );
          $(".card:eq(1)").hide();
        } else {
          $(".card:eq(0)").hide();
        }
        // 初始化表格
        $("#table").bootstrapTable({
          classes: "table table-bordered table-hover table-striped text-nowrap", // 表格样式
          url: "${ctx}/customer-retrieval/list?lossId=${loss.id}", // 请求后台的URL
          method: "GET", // 请求方式
          toolbar: "#toolbar",
          pagination: true, //是否显示分页条
          pageNumber: 1, // 首页页码，默认为1
          pageSize: 5, //一页显示的行数
          paginationLoop: false, //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
          pageList: [5, 10, 20], //选择每页显示多少行，数据过少时可能会没有效果
          clickToSelect: true, // 是否启用点击选中行
          undefinedText: "-", // 当字段为 undefined 显示
          sortOrder: "asc", // 排序方式
          showColumns: true, // 是否显示所有的列
          showRefresh: true, // 是否显示刷新按钮
          showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
          showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
          exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
          // 响应处理
          responseHandler: function (res) {
            if (res.code !== 200) {
              notify("mdi mdi-close", res.message, "danger");
              return [];
            }

            return res.data;
          },
          // 查询参数
          queryParams: function () {
            // 查询条件
            return $("[name='form1']").serializeArray(); // 得到条件查询表单中所有的值
          },
          columns: [
            {
              // 列
              field: "example",
              checkbox: true, // 是否显示复选框
            },
            {
              field: "no", // 属性名
              align: "center", // 对齐方式
              title: "序号", // 标题
              formatter: function (value, row, index) {
                return index + 1;
              },
            },
            {
              field: "id",
              title: "编号",
              visible: false,
            },
            {
              field: "measure",
              align: "center",
              title: "措施",
            },
            {
              field: "isValid",
              align: "center",
              title: "是否有效",
              formatter: function (value, row, index) {
                // 格式化
                if (row.isValid === 1) {
                  return "<span class='badge badge-success'>有效</sapn>";
                } else if (row.isValid === 0) {
                  return "<span class='badge badge-danger'>无效</span>";
                } else {
                  return "<span class='badge badge-info'>-</span>";
                }
              },
            },
            {
              field: "createDate",
              align: "center",
              title: "创建时间",
            },
            ii(),
          ],
          onLoadSuccess: function () {
            // 数据加载成功时调用的方法
            // 滚动到最底部
            let h = $(document).height() - $(window).height();
            $("body").animate({ scrollTop: h }, 1000);
          },
          onLoadError: function () {
            // 数据加载失败时调用的方法
            setTimeout(function () {
              notify("mdi mdi-close", "数据加载失败!", "danger");
            }, 300);
          },
          onCheck: function () {
            // 复选框单击事件
            getSelections();
          },
        });
      });

      // 操作按钮
      function ii() {
        if ("${loss.state}" !== "3") {
          return {
            field: "operate",
            align: "center",
            title: "操作",
            formatter: btnGroup,
            events: {
              // 事件
              "click .edit-btn": function (event, value, row, index) {
                edit(row);
              },
              "click .del-btn": function (event, value, row, index) {
                remove("customer-retrieval", row.id);
              },
            },
          };
        }
      }

      // 操作方法 - 新增
      function toAdd() {
        $("#myModal").modal("show");
        $("#myModalLabel").html("新增暂缓措施信息");
        $("form")[1].reset();
        $("#btn111").html("保存");
      }

      // 操作方法 - 编辑
      function edit(r) {
        $("#myModal").modal("show");
        $("#myModalLabel").html("修改暂缓措施信息");
        $("[name='id']").val(r.id);
        $("#measure_2").val(r.measure);
        r.isValid === 1
          ? $("[name='isValid']:eq(2)").prop("checked", true)
          : $("[name='isValid']:eq(3)").prop("checked", true);
        $("#btn111").html("修改");
      }

      // 操作方法 - 保存,修改
      function insert_update() {
        let $measure = $("#measure_2");

        if ($measure.val() === "") {
          notify("mdi mdi-close", "暂缓措施为必填项！", "danger");
          $measure.focus();
        } else {
          let url =
            $("#btn111").text() === "保存"
              ? "${ctx}/customer-retrieval/save"
              : "${ctx}/customer-retrieval/update";
          let obj = $("[name='zgform']").serializeArray();
          saveOrUpdate(url, obj);
        }
      }

      function insert() {
        let $measure_1 = $("#measure_1");
        if ($measure_1.val() === "") {
          notify("mdi mdi-close", "流失措施为必填项！", "danger");
          $measure_1.focus();
        } else {
          let obj = $("form:eq(0)").serializeArray();
          save("${ctx}/customer-retrieval/save", obj);
          $("form")[0].reset();
        }
      }

      // 操作方法 - 确认流失
      function lossOk() {
        $.confirm({
          title: "确认流失", // 标题
          content: "您确定要将该客户标记为确认流失吗？", // 内容
          type: "red", // 类型颜色
          icon: "mdi mdi-account-check", // 小图标
          typeAnimated: true, // 是否使用动画
          buttons: {
            // 按钮
            confirm: {
              // 确认按钮
              text: "确认",
              btnClass: "btn-red",
              action: function () {
                $("#loss").modal("show");
              },
            },
            cancel: {
              // 取消按钮
              text: "取消",
              action: function () {},
            },
          },
        });
      }

      function lossBtn() {
        let $lossReason = $("[name='lossReason']");

        if ($lossReason.val() === "") {
          notify("mdi mdi-close", "流失原因为必填项！", "danger");
          $lossReason.focus();
        } else {
          let obj = {
            id: "${loss.id}",
            lossReason: $lossReason.val(),
            confirmLossDate: getFormatDate(),
          };
          $.get("${ctx}/customer-loss/confirm-loss", obj, function (data) {
            $("#loss").modal("hide");
            let loader = $("body").lyearloading({
              opacity: 0.2,
              spinnerSize: "lg",
            });
            if (data.code === 200) {
              setTimeout(function () {
                loader.destroy();
                // 刷新表格
                $("#table").bootstrapTable("refresh");
                notify(
                  "mdi mdi-checkbox-marked-circle-outline",
                  data.message,
                  "success"
                );
              }, 1e3);
              setTimeout(function () {
                location.href = "${ctx}/page/customer-loss";
              }, 3e3);
            } else {
              setTimeout(function () {
                loader.destroy();
                notify("mdi mdi-close", data.message, "danger");
              }, 1e3);
            }
          });
        }
      }

      // 操作按钮 - 显示所有
      function query() {
        $("form")[1].reset();
        $("#table").bootstrapTable("refresh", { pageNumber: 1 });
      }
    </script>
  </body>
</html>
